<template>
  <div class="uploaderImg">
    <van-nav-bar title="修改头像" @click-left="$router.back()">
      <template #left>
        <van-icon name="down" />
      </template>
    </van-nav-bar>
    <!-- <van-image fit="cover" :src="'http://localhost:1337' + userInfo.avatar" /> -->
    <!-- <van-uploader :after-read="afterRead" /> -->
    <van-uploader v-model="fileList" :after-read="afterRead" />
  </div>
</template>

<script>
import { editUserPhotoApi, editUserInfoApi } from "./mine";
import { mapState } from "vuex";
export default {
  name: "uploaderImg",
  data() {
    return {
      fileList: [
        {
          // url: "http://localhost:1337" + userInfo.avatar,
          url: "https://img01.yzcdn.cn/vant/leaf.jpg",
        },
      ],
    };
  },
  methods: {
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      let fd = new FormData();
      fd.append("files", file.file);
      // console.log(fd);
      const res = await editUserPhotoApi(fd);
      // console.log(res.data.data[0].id);
      await editUserInfoApi({ avatar: res.data.data[0].id });
      this.$toast.success("更新成功");
      // this.$router.go(0);
    },
    //整理图片
    editimg() {
      const url = "http://localhost:1337" + this.userInfo.avatar;
      const obj = [
        {
          url: url,
        },
      ];
      // console.log(obj);
      this.fileList = obj;
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  created() {
    this.editimg();
  },
};
</script>

<style lang="less" >
i.van-icon.van-icon-down {
  transform: rotate(90deg);
  color: #222222;
  font-size: 40px;
  font-weight: 300;
}
.van-nav-bar__title.van-ellipsis {
  font-weight: 700;
  color: #222222;
  font-size: 36px;
}
.van-uploader {
  position: relative;
  width: 360px;
  left: 50%;
  transform: translateX(-50%);
}
//图片
.van-uploader__preview {
  box-sizing: border-box;
  width: 360px;
  height: 360px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  .van-image.van-uploader__preview-image {
    width: 360px;
    height: 360px;
  }
}

//上传组件
.van-uploader__upload {
  position: absolute;
  width: 360px;
  height: 360px;
  left: 50%;
  transform: translateX(-50%);
}
</style>